<template>
	<view class="content">
		<u-navbar
			title="余额提现" 
			:bg-color="`${mainColor}`" 
			fixed 
			placeholder 
			autoBack
			:height="navigationBarHeight"
			:title-style="{color:`${textColor}`, fontSize:'16px', fontWeight:700}"
			:left-icon-color="`${textColor}`"
			v-if="showTitle"
			/>
		<view class="content-page">
			<view class="balance-box">
				<view class="text1">
					可用余额(元)
				</view>
				<view class="text2">
					{{info.balance.toFixed(2)}}
				</view>
			</view>
			<view class="title">
				提现金额(元)
			</view>
			<view class="input-class flex-a">
				<input :value="withdrawAmount" type="digit" placeholder="请输入提现金额" @input="inputChanged"/>
				<view class="btn" >
					<u-button plain @click="withdrawAmount = info.balance.toFixed(2)" :color="`${mainColor}`"
						custom-style="padding:4px" >全部提现</u-button>
				</view>
			</view>
			<view class="title">
				选择提现方式
			</view>
			<view class="">
				<view class="item-box" v-for="(item, index) in info.methods" :key="index"
					v-if="!hideItem(item)">
					<view class="flex-a" style="align-items: center;">
						<view style="flex: 0;">
							<u-radio-group v-model="selection" @change="checkChanged">
								<u-radio :name="item.type" shape="circle" :disabled="!item.is_set"
									:active-color="`${mainColor}`"></u-radio>
							</u-radio-group>
						</view>
						<image class="left-img" src="/static/alipay.svg" v-if="item.type == 'alipay'">
						<image class="left-img" src="/static/bank.svg" v-if="item.type == 'bank'">
						<image class="left-img" src="/static/weixin.svg" v-if="item.type == 'wechat'"></image>
						</image>
						{{item.name}}
						<view class="tip" @click="clickSetWithdraw(item.type, item.is_set, item.account)">
							{{item.is_set ? item.account : `请先设置提款${item.name}`}}
						</view>
					</view>
					<view class="text3">
						单笔最低{{item.min_amount}}元，
						单笔最高{{item.max_amount}}元，
						当日限额{{item.limit_amount}}元(实时到账),
						手续费：{{item.fee}}元/笔
					</view>
				</view>
			</view>
		</view>
		<view class="fix-bottm" :style="{bottom:`${bottomHeight}px`}">
			<u-button :color="`${mainColor}`" shape="circle" @click="doSubmit"
				:custom-style="{color: `${textColor}`}">立即提现</u-button>
		</view>
		<u-popup :show="showBankList" @close="showBankList = false" round="10">
			<view class="popBox">
				<view class="top flex-b">
					<view class="cancel" @click="showBankList = false">
						取消
					</view>
					<view class="title9">
						收款银行卡
					</view>
					<view class="confirm" @click="clickConfirm">
						确定
					</view>
				</view>
				<scroll-view style="height: 312px;background-color: #fff;">
					<u-cell-group>
						<u-cell v-for="(item, index) in info.bank_cards" :key="index" clickable
							@click="clickBankItem(index, item)">
							<view slot="title">
								<view class="flex-ct" style="gap: 8px;">
									{{item.bank_name}}({{item.branch_name}})
									<text class="tag" v-if="item.is_default">默认</text>
								</view>
								<view>{{item.card_number}}</view>
							</view>
							<view slot="value" class="u-slot-value">
								<u-radio-group v-model="selectBank" @change="selectBankChangd">
									<u-radio shape="circle" :name="index" :active-color="`${mainColor}`"></u-radio>
								</u-radio-group>
							</view>
						</u-cell>
					</u-cell-group>
				</scroll-view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { systemInfo } from '@/utils/mixin';
	import { doWithdraw, getBankList, getWithdrawInfo } from '@/api';

	export default {
		mixins: [systemInfo],
		data() {
			return {
				selection: null,
				withdrawAmount: '',
				showBankList: false,
				selectBank: null,
				info: {
					balance: 0,
					methods: [],
					bank_cards: []
				}
			}
		},
		onLoad(){
			this.getSystemInfo();
		},
		onShow() {
			this.loadWithdrawInfo();
		},
		methods: {
			async loadWithdrawInfo() {
				const res = await getWithdrawInfo();
				this.info = res.data;
				this.selection = res.data.default_withdrawal_method;
			},
			inputChanged({detail}) {
				this.withdrawAmount = detail.value.trim();
			},
			checkChanged(checked) {
				this.selection = checked;
			},
			hideItem(item) {
				if (this.$store.state.onlineAudit) {
					// #ifdef MP-WEIXIN
					return item.type == 'alipay';
					// #endif
					// #ifdef MP-ALIPAY
					return item.type == 'wechat';
					// #endif
				}
				
				return false;
			},
			clickSetWithdraw(type, is_set, account) {
				if (type == 'alipay') {
					uni.navigateTo({
						url:'/pages/account/setting'
					})
				} else if (type == 'bank') {
					if (is_set) {
						this.selectBank = this.info.bank_cards.findIndex((item) => item.card_number == account)
						this.showBankList = true;
						return;
					}
					
					uni.navigateTo({
						url:'/pages/account/bank'
					})
				}
			},
			clickBankItem(index, item) {
				this.selectBank = index
				this.info.methods.forEach((method) => {
					if (method.type == 'bank') {
						method.account = item.card_number
					}
				});
				this.showBankList = false;
			},
			selectBankChanged(value) {
				this.selectBank = value;
			},
			clickConfirm() {
				this.info.methods.forEach((item) => {
					if (item.type == 'bank') {
						item.account = this.info.bank_cards[this.selectBank].card_number
					}
				});
				this.showBankList = false;
			},
			async doSubmit() {
				if (this.withdrawAmount.length === 0) {
					this.notify('请输入提现金额！');
					return;
				}
				if (!this.selection) {
					this.notify('请选择提现方式！');
					return;
				}
				const method = this.info.methods.find((item) => item.type == this.selection);
				if (!method.is_set) {
					this.notify(`请先设置${method.name}提现方式`);
					return;
				}
				const withdrawAmount = parseFloat(this.withdrawAmount);
				if (withdrawAmount < (method.min_amount + method.fee)) {
					this.notify(`提现金额不能小于${method.min_amount + method.fee}元`);
					return;
				}
				if (withdrawAmount > method.max_amount) {
					this.notify(`提现金额不能大于${method.max_amount}元`);
					return;
				}
				if (withdrawAmount > this.balance) {
					this.notify('提现金额不能大于可用余额！');
					return;
				}
				
				const bankCardId = method.type == 'bank' ? this.info.bank_cards.find((item)=> item.card_number === method.account).id : '';
				
				const res = await doWithdraw(withdrawAmount, method.id, bankCardId);
				if (res.code === 2000) {
					this.setToast(res.msg);
					uni.navigateBack();
				} else {
				 	await this.loadWithdrawInfo();
				}
				this.withdrawAmount = '';
			},
			notify(message) {
				uni.showToast({
					icon:'none',
					title:message
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.content-page {
    padding: 10px 10px 93px;
    background: linear-gradient($main-color 52px, $bg-color);
    background-repeat: no-repeat;
    background-size: 100% 100px;
	
	.balance-box {
	    width: 100%;
	    height: 104px;
	    background-color: hsla(0, 0%, 100%, .92);
	    border-radius: 7px;
	    text-align: center;
	    padding-top: 20px;
	    box-sizing: border-box;
	    box-shadow: 0 0 3px 1px rgba(0, 0, 0, .05);
	    margin-bottom: 41px;
		
		.text1 {
		    font-size: 18px;
		    margin-bottom: 10px;
		}
		
		.text2 {
		    font-family: Times New Roman;
		    font-size: 31px;
		    font-weight: 500;
		    color: $main-color;
		}
	}
	
	.title {
	    font-weight: bold;
	    margin-bottom: 20px;
	}
	
	.input-class {
	    position: relative;
	    width: 100%;
	    height: 41px;
	    border-bottom: 1px solid #f1f1f1;
	    margin-bottom: 41px;
		
		.btn {
		    position: absolute;
		    right: 0;
		    top: -5px;
		    width: 78px;
		    height: 31px;
		}
	}
	
	.item-box {
	    margin-bottom: 10px;
	    line-height: 31px;
		
		.left-img {
		    width: 18px;
		    height: 18px;
		    margin-right: 5px;
		}
		
		.tip {
		    padding: 0 10px 5px;
		    height: 26px;
		    font-size: 13px;
		    color: #3d94ee;
		    margin-left: 10px;
		    background-color: #edf7ff;
		}
		
		.tip:active {
			background-color: #eee;
		}
		
		.text3 {
		    margin-left: 26px;
		    font-size: 11px;
		    color: #666;
			line-height: 20px;
		}
	}
}

.popBox {
    background-color: var(--grey-color8);
    border-radius: 10px 10px 0 0;
	
	.top {
	    height: 56px;
	    padding: 0 20px;
	    border-bottom: 0.5px solid var(--grey-color4);
	    background: #fff;
	    border-radius: 10px 10px 0 0;
		
		.cancel {
		    font-family: PingFang SC;
		    font-weight: 500;
		    font-size: 16px;
		    color: #999;
		    height: 56px;
		    line-height: 56px;
		}
		
		.title9 {
		    margin-top: 15px;
		    font-family: PingFang SC;
		    font-weight: bold;
		    font-size: 15px;
		    color: #333;
		}
		
		.confirm {
		    font-family: PingFang SC;
		    font-weight: 500;
		    font-size: 16px;
		    color: $main-color;
		    height: 56px;
		    line-height: 56px;
		}
	}
	
	.tag {
		color: #e33233;
		background-color: #ffe3e0; 
		font-size: 12px;
		padding: 2px 8px;
		border-radius: 4px;
	}
}

.fix-bottm {
	position: fixed;
    bottom: 0;
    left: 0;
	right: 0;
    padding: 10px;
    box-sizing: border-box;
}
</style>
